<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="ol3/ol.css" type="text/css">
    <style>
        html,
        body,
        #container{
    	  height: 100%;
    	  width: 100%;
    	}
        #map {
          height: 100%;
          width: 100%;
    	}
    	.fix{
    		position: fixed;
    		right: 0;
    		top: 0;
    		height: 50px;
    		padding: 10px;
    		vertical-align: middle;
    	}
    	button{
    		height: 30px;
    		line-height: 30px;
    		background-color: blue;
    		color: white;
    		z-index: 9999;
    	}
    </style>
    <title>OpenLayers 3 example</title>
    <script src="ol3/ol.js" type="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="map"></div>
        <div class="fix">
            <button id="toggleRoad">切换路网</button>
            <button id="toggleBase">切换底图</button>
        </div>
    </div>
    <script type="text/javascript">
    var GIS = {};
    GIS.MAP = new ol.Map({
        logo: false,
        target: 'map'
    });

    var amap = new ol.source.XYZ({
        url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
    });

    var amapRoad = new ol.source.XYZ({
        url: 'http://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
    });

    var google = new ol.source.XYZ({ url: 'http://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}' });
    // http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G

    var googleRoad = new ol.source.XYZ({
        // url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
        url:'http://www.google.cn/maps/vt?lyrs=h@189&gl=cn&x={x}&y={y}&z={z}'
    });

    GIS.baseMapSource = {
        amap: amap,
        google: google,
        amapRoad:amapRoad,
        googleRoad:googleRoad
    }

    // 设置地图

    var view = new ol.View({
        // center: ol.proj.fromLonLat([116.51, 39.55]),
        center: ol.proj.transform([116.06667, 39.66667], 'EPSG:4326', 'EPSG:3857'),
        // projection: 'EPSG:4326',
        zoom: 10,
        maxZoom:18,
        minZoom:8
    });

    var currentLayer = 'amap';
    var baseMapLayer = new ol.layer.Tile({
        title: '底图',
        visible: true,
        source: GIS.baseMapSource.google
    });

    var baseRoadLayer = new ol.layer.Tile({
        title: '路网图',
        visible: true,
        source:GIS.baseMapSource.googleRoad
    })

    GIS.MAP.getLayers().push(baseMapLayer);
    GIS.MAP.getLayers().push(baseRoadLayer);
    GIS.MAP.setView(view);

    GIS.MAP.addControl(new ol.control.ScaleLine())

    var roadbtn = document.getElementById('toggleRoad');
    var basebtn = document.getElementById('toggleBase');
    roadbtn.addEventListener('click', function(e) {
        var vb = baseRoadLayer.getVisible();
        baseRoadLayer.setVisible(!vb);
    });
    basebtn.addEventListener('click',function(e){
    	if(currentLayer==='amap'){
    		baseMapLayer.setSource(GIS.baseMapSource.google);
    		baseRoadLayer.setSource(GIS.baseMapSource.googleRoad);
    		currentLayer = 'google';
    	}else{
    		baseMapLayer.setSource(GIS.baseMapSource.amap);
    		baseRoadLayer.setSource(GIS.baseMapSource.amapRoad);
    		currentLayer = 'amap';
    	}
    });
    </script>
</body>

</html>